<!-- 聊天发信息页面 -->
<template>
    <div ref="ChatView" class="ChatView">
        <van-nav-bar 
            :title="title"
            left-text="返回" 
            left-arrow
            @click-left="$router.go(-1)"
            @click-right="handleClickRight"
        >
            <template #right>
                <van-icon name="ellipsis" />
            </template>
        </van-nav-bar>
        <Messages ref="Messages" class="messages" />
        <Input class="Input" 
            :showUploader="true"
            @sendContent="onSendMessages"
            @clickIcon="clickIcon"
        />
    </div>
</template>

<script>
    import { mapActions, mapMutations, mapState } from "vuex";
    import Messages from "@/components/chat/messages.vue";
    import Input from "@/components/common/input.vue";
    import { transformImgString } from "@/utils/common";

    export default {
        name: "ChatView",
        data() {
            return {
                id: '',
                isgroupChat: '',
            };
        },
        components: {
            Input,
            Messages,
        },
        computed: {
            ...mapState(["user", "friendList", "lastMessageList", 'groupChatList']),
            element() {          // 计算属性返回该元素
                return this.$refs.ChatView;
            },
            title() {
                if ('user_id' in this.$route.query) {
                    const friend = this.friendList.find(item => item.friendId._id == this.$route.query.user_id);
                    // 如果有备注且不为空，优先显示备注名
                    if (friend && friend.remark && friend.remark.trim() !== '') {
                        return friend.remark;
                    }
                    // 否则显示原昵称
                    return friend.friendId.nickname;
                } else if ('groupChat_id' in this.$route.query) {
                    return this.groupChatList.find(item =>  item._id == this.$route.query.groupChat_id).groupName;
                }
            }
        },
        watch: {
            $route: {
                handler(to, from) { 
                    if (to.name != "chat") {
                        return;
                    } 
                    
                    if ('user_id' in this.$route.query) {
                        this.id = this.friendList.find(item => item.friendId._id == this.$route.query.user_id).friendId._id;
                        this.isgroupChat = false;
                    }
                    else if ('groupChat_id' in this.$route.query) {
                        this.id = this.groupChatList.find(item => item._id == this.$route.query.groupChat_id)._id
                        this.isgroupChat = true;
                    }
                },
                immediate: true,
            },
        },
        methods: {
            ...mapMutations(["upLastMessages", "upMessage"]),
            ...mapActions('chat', ['sendMessage', 'delFriend']),
            onSendMessages(value) {  // 发送消息
                let message = {
                    sender: this.user._id,                      // 发件人
                    sender_headImg: this.user.headImgUrl,       // 发件人头像
                    sender_nickname: this.user.nickname,        // 发件人昵称
                    addresser: this.id,                         // 收件人
                    content: transformImgString(value),         // 信息内容
                    date: Date.now(),                           // 发信息的时间
                    is_groupChat: this.isgroupChat,             // 是否为群聊信息
                };
                
                this.sendMessage(message);               // 发送消息

                this.upMessage(message);
                this.upLastMessages(message);
            },
            clickIcon() {   // 子组件点击出现了表情包菜单，整个页面往上滑以显示表情包菜单
                this.$nextTick(() =>  this.element.scrollTop = this.element.scrollHeight); 
            },
            // 处理右上角的点击事件
            handleClickRight() {
                if (this.isgroupChat) {
                    // 如果是群聊，跳转到群聊设置页面
                    this.$router.push({ 
                        path: '/groupMoreOperate', 
                        query: { groupChat_id: this.id } 
                    });
                } else {
                    // 如果是私聊，跳转到好友设置页面
                    this.$router.push({ 
                        name: 'moreOperate', 
                        query: { user_id: this.id } 
                    });
                }
            },
        },
    };
</script>

<style lang="less" scoped>
    .ChatView {
        height: 100vh;
        overflow-y: auto;
        scrollbar-width: none; 
        display: flex;
        flex-direction: column;
        .messages {
            flex: 1;
        }
    }
</style>